<template>
  <div class="app">
    <h2>{{ sum }}</h2>
    <h2 v-text="sum"></h2>
    <h2 v-big="sum"></h2>
    <h2 v-beauty="sum"></h2>
    <Child/>
  </div>
</template>

<script>
  import Child from './components/Child.vue'

  export default {
    name:'App',
    components:{Child},
    data() {
      return {
        sum:10,
      }
    },
    directives:{
      /* 
        1.big函数何时调用？—— 有人使用v-big指令时，用几次调几次
        2.big函数中的this是谁？ —— 爱谁谁，反正不是vc或vm（底层有意为之）
          思考：为什么自定义指令中的this不是vc或vm呢？
          原因：防止表达式以外的数据参与指令的内部逻辑
        3.big函数接收哪些参数？ —— element(指令所在元素)、
        4.big函数是否需要写返回值？—— 不需要返回值
      */
      big(element,{value}){
        element.innerText = value * 10
      }
    }
  }
</script>

<style>
  .app {
    background-color: #ddd;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 0 10px;
  }
</style>